<template>
  <div class="archive">
    <div class="archive__title">
      <svg
        width="20"
        height="20"
        class="archive__title-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path
          d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5zM16 8L2 22M17.5 15H9"
        ></path>
      </svg>
      <div class="archive__title-title">
        <span>搜索到</span>
        <span class="muted">{{ articleList.length }}</span>
        <span>篇与</span>
        <span class="muted ellipsis">{{ $route.params.keyword }}</span>
        <span>的结果</span>
      </div>
    </div>

    <ul class="archive__list list" data-wow="off">
      <articleCard
        v-for="(item, idx) in articleList"
        :key="idx"
        :article="item"
      />
    </ul>
  </div>
</template>

<script>
import articleCard from "@/components/client/ArticleCard.vue";
export default {
  created() {
    this.searchArticle(this.$route.params.keyword);
  },
  data() {
    return {
      articleList: [],
    };
  },
  watch: {
    $route(to, from) {
      if (this.$route.params.keyword) {
        this.searchArticle(this.$route.params.keyword);
      }
    },
  },
  components: { articleCard },
  methods: {
    // 搜索相关文章
    searchArticle(keyword) {
      this.$axios
        .post("/api/article/search.php", {
          keyword,
        })
        .then((res) => {
          this.articleList = res.data.data;
        });
    },
  },
};
</script>

<style scoped>
.archive {
  border-radius: var(--radius-wrap);
  padding: 0 15px;
  background: var(--background);
  box-shadow: var(--box-shadow);
}
.archive__title {
  display: flex;
  align-items: center;
  height: 45px;
  line-height: 45px;
  color: var(--main);
  border-bottom: 1px solid var(--classC);
}
.archive__title-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-right: 5px;
}
.archive__title-title {
  display: flex;
  align-items: center;
}
.archive__title-title .muted {
  color: var(--theme);
  margin: 0 5px;
}
.archive__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 50px 0;
  color: var(--routine);
}
.archive__empty-icon {
  margin-bottom: 30px;
  fill: var(--routine);
}
</style>
